<template>
  <div class="items">
    <h1 class="headerTitle">todos</h1>
    <div class="item">
      <Header></Header>
      <ContentBody></ContentBody>
      <Footer></Footer>
    </div>
  </div>

</template>

<script>
  import Header from '@/components/components/header'
  import Footer from '@/components/components/footer'
  import ContentBody from '@/components/components/body'
    export default {
        name: "item",
      components:{
          Header,
          Footer,
          ContentBody
      },
      mounted(){
        this.$nextTick(()=>{
          this.$store.dispatch('setTodos');
        })
      }
    }
</script>

<style scoped>
  .items{
    text-align: center;
  }
  h1{
    font-weight:normal
  }
  .headerTitle {
    color: pink;
    font-size: 50px;
    font-weight: 700;
  }
  .item{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid #4f4f4f;
    box-shadow: 2px 1px 8px #4f4f4f;
    margin: 30px auto;
    width: 500px;
  }
</style>
